<template>
  <!-- <div>树组件</div> -->
  <div class="role-container">
    <my-float fit>
      <my-float-item class="float-left">
        <div class="float-left-tit">
          <div><i class="el-icon-s-order"></i> 组织结构</div>
          <el-button type="primary" size="mini" icon="el-icon-plus" @click="showAddRoleModal" style="margin-left: 20px">新增角色</el-button>
        </div>
        <z-tree ref="roleTreeRef"
          :tree-id="roleTreeId"
          :nodes="roleTreeNodes"
          :setting="roleTreeSetting"
          :enable-right-menu="true"
          :edit-enable="true">
          <template v-slot:right-menu="props">
              <ul>
                <li @click="showEditRoleModal(props.node)">修改</li>
                <li @click="deleteRole(props.node)">删除</li>
              </ul>
          </template>
        </z-tree>

      </my-float-item>
      <my-float-item class="float-right">
        <div class="float-right-tit"><i class="el-icon-s-order"></i> 菜单权限</div>
        <z-tree ref="menuTreeRef"
          :tree-id="menuTreeId"
          :nodes="menuTreeNodes"
          :setting="menuTreeSetting"
          :enable-right-menu="false"
          :edit-enable="false">
        </z-tree>
      </my-float-item>
    </my-float>
    <div class="footer-btn">
      <el-button type="primary" size="small" @click="roleMenuUpdate">保存设置</el-button>
    </div>

    <!-- 新增&修改 角色弹窗 -->
    <addRole ref="addRoleRef"></addRole>

  </div>
</template>

<script>
  import company from '../../../plugins/zTree/css/zTreeStyle/img/diy/company.png'
  import first from '../../../plugins/zTree/css/zTreeStyle/img/diy/first.png'
  import second from '../../../plugins/zTree/css/zTreeStyle/img/diy/second.png'
  import three from '../../../plugins/zTree/css/zTreeStyle/img/diy/three.png'
  import addRole from './code/addRole.vue'
  import { getToken } from '@/utils/cookie'
  import { getRoleList, listByRoleId, roleMenuUpdate } from '@/api/role.js'
	import zTree from '@/components/z-tree.vue'
  import { roleDel } from '@/api/role'

  export default {
    components: {
      addRole,zTree
    },
    data() {
      var zTree;
      var rightzTree;
      var roleId = 0;
      return {
        roleTreeId:'roleTreeId',
        roleTreeNodes:[],
        roleTreeSetting:{
          view: {
            showLine: true
          },
          data: {
            simpleData: {
              enable: true,
              idKey: 'roleId',
              pIdKey: 'rolePid',
              rootPId: '0'
            },
            key: {
              name: 'roleName',
              title: 'roleName'
            },
            keep: {
              leaf: true,
              parent: true
            }
          },
          callback: {
            onClick:  this.roleTreeOnclick
          },
          edit: {
            enable: true, // 可编辑
            showRemoveBtn: false, // 显示删除按钮
            removeTitle: '删除节点',
            showRenameBtn: false, // 显示编辑按钮
            renameTitle: '编辑节点名称',
            drag: {
              autoExpandTrigger: false,
              isCopy: false,
              isMove: true,
              prev: true,
              next: true,
              inner: true,
              borderMax: 20,
              borderMin: -10,
              minMoveSize: 10,
              maxShowNodeNum: 10,
              autoOpenTime: 500
            }
          }
        },
        selectRoleNode:{},

        menuTreeId:'menuTreeId',
        menuTreeNodes:[],
        menuTreeSetting:{
          check: {
            enable: true
          },
          view: {
            showLine: true
          },
          data: {
            simpleData: {
              enable: true,
              idKey: 'menuId',
              pIdKey: 'menuPid',
              rootPId: '0'
            },
            key: {
              name: 'menuName',
              title: 'menuName'
            },
            keep: {
              leaf: true,
              parent: true
            }
          },
          callback: {
          },
          edit: {
            enable: true, // 可编辑
            showRemoveBtn: false, // 显示删除按钮
            removeTitle: '删除节点',
            showRenameBtn: false, // 显示编辑按钮
            renameTitle: '编辑节点名称',
            drag: {
              autoExpandTrigger: false,
              isCopy: false,
              isMove: true,
              prev: true,
              next: true,
              inner: true,
              borderMax: 20,
              borderMin: -10,
              minMoveSize: 10,
              maxShowNodeNum: 10,
              autoOpenTime: 500
            }
          }
        },
      };
    },
    mounted() {
      this.loadRoleTree();
    },
    methods: {
      //加载组织机构（角色树）
      async loadRoleTree() {
        //获取角色树数据
        var res = await getRoleList();
        var data = res.data;
        for(var i = 0; i < data.length; i++) {
          data[i].icon = company;
        }
        this.roleTreeNodes=data;

        setTimeout(()=>{
          //加载第一个节点
          var treeObj=this.$refs.roleTreeRef.getSyncTreeObj();
          var node = treeObj.getNodes()[0];
          treeObj.selectNode(node);
          this.selectRoleNode=node;
          this.loadMenuTree();
        },1000);
      },

      // 加载菜单树
      async loadMenuTree() {
        var res = await listByRoleId(this.selectRoleNode.roleId);
        var data = res.data;
        // 设计菜单级别图标
        for(var i = 0; i < data.length; i++) {
          if(data[i].menuLevel == 1) {
            data[i].icon = first;
          }else if(data[i].menuLevel == 2) {
            data[i].icon = second;
          }else if(data[i].menuLevel == 3) {
            data[i].icon = three;
          }
          // 设置勾选状态
          data[i].menuSelect == 0 ? data[i].checked = true : data[i].checked = false;
        }
        this.menuTreeNodes=data;
      },

      // 保存设置-保存角色菜单
      async roleMenuUpdate() {
        var treeObj = this.$refs.menuTreeRef.getSyncTreeObj();
        var nodes = treeObj.getNodes();
        var idStr = [];
        for(var i = 0; i < nodes.length; i++) {
          if(nodes[i].checked == true) {
            idStr.push(nodes[i].menuId)
          }
          var nodeChildren = nodes[i].children;
          if(nodeChildren == undefined || nodeChildren == null || nodeChildren.length == 0)continue;
          for(var j = 0; j < nodeChildren.length; j++) {
            if(nodeChildren[j].checked == true) {
              idStr.push(nodeChildren[j].menuId)
            }
          }
        }
        idStr = idStr.join(',');
        var params = {
          idStr: idStr,
          roleId: this.selectRoleNode.roleId
        };
        var result = await roleMenuUpdate(params);
        this.$utils.showSuccessMessage(result.msg);
      },

      // 显示-添加角色弹窗
      showAddRoleModal() {
        this.$refs.addRoleRef.open();
      },
      // 显示-编辑角色弹窗
      showEditRoleModal(node){
        var {roleId,roleName}=node;
        this.$refs.addRoleRef.open(roleId,roleName);
      },
      // 删除角色
      async deleteRole(node){
          var res=await roleDel(node.roleId);
          this.$utils.showSuccessMessage(res.msg)
          this.loadRoleTree();
      },

      //============角色树-回调函数=============
      roleTreeOnclick(event, treeId, treeNode){
        if(treeNode!==this.selectRoleNode){
          this.selectRoleNode=treeNode;
          this.loadMenuTree();
        }
      },

      //============菜单树-回调函数==============

    }
  };
</script>

<style lang="scss" scoped>
  .role-container{
    height: 200px;
    min-height:calc(100% - 50px);
    .float-left{
      border-right: 2px solid #ededed;
      width: 300px;
      height: 100%;
      overflow-y: auto;
      .float-left-tit{
        color: #000;
        font-size: 15px;
        line-height: 34px;
        padding-left: 24px;
        font-weight: bold;
        border-bottom: 1px solid #f1f1f1;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-right: 10px;
        padding-top: 5px;
        padding-bottom: 5px;
      }
    }
    .float-right{
      width: calc(100% - 300px);
    }
    .float-right-tit{
      color: #000;
      font-size: 15px;
      line-height: 34px;
      padding-left: 24px;
      font-weight: bold;
      border-bottom: 1px solid #f1f1f1;
      padding: 5px 10px;
    }
    .footer-btn{
      height: 50px;
      box-sizing: border-box;
      border-top: 2px solid #ededed;
      text-align: center;
      line-height: 50px;
    }
  }
</style>
